<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>具名插槽</title>
  <style>

  </style>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

  /* slot留坑，外部填入html内容*/
  var MySlot = {
    template:`
      <li>
        以下预留第一个坑
        <slot name="one"></slot>
        <hr/>
        以下预留第二个坑
        <slot name="two"></slot>
      </li>
    `
  }
  Vue.component('my-slot',MySlot);
  /**
   *
   * */

  /* 入口组件： 实现九宫格 */
  var App = {
    template:`
        <div>
          <my-slot>
            <h1 slot="two">我是one，对应第一个坑</h1>
            <h1 slot="one">我是two，对应第二个坑</h1>
          </my-slot>
        </div>
      `
  }

  new Vue({
    el:'#app',
    components:{
      app:App,
    },
    template:'<app/>'

  });

</script>
</body>
</html>
